<template>
  <uni-nav-bar title="采购入库单记录" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package datas">
    <uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
      @change="change" />
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package order" v-for="item in orderLists" :key="item.id">
      <view>订单号：{{item.order_sn}}</view>
      <view class="space-between lit" style="margin:10rpx 0px;">
        <view>{{item.fill_name}}</view>
        <view>{{item.amount}}公斤</view>
      </view>
      <view class="space-between lit">
        {{item.remarks}}
      </view>
      <view class="space-between lit" style="margin-top:10rpx;">
        <view>{{item.createtime}}</view>
        <view>补液员：{{item.nickname}}</view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
  import { showLoading } from '@/utils/prompt';
  import { navBack, navTo } from '@/utils/navigator';
  import { ref } from 'vue';
  import { format, subDays } from 'date-fns';
  import { toPublish } from '@mqtt';
  import { getDeliveryCg } from '@/gql/warehouse';
  let now = new Date();
  let end = format(now, 'yyyy-MM-dd');
  let daysAgo = subDays(now, 6);
  let start = format(daysAgo, 'yyyy-MM-dd');
  const range = ref([start, end]);
  const pageHeight = ref();
  const lastPage = ref(1);
  const currentPage = ref(1);
  const orderLists = ref([]);
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 125;
    },
  });
  init()
  /**
   * 初始化获取加注订单列表
   * @param page  获取当前页加注数据
   * @param start  开始时间
   * @param end  结束时间
   */
  function init() {
    showLoading()
    const payload = {
      query: getDeliveryCg,
      variables: {
        delivery_id: 0,
        page: currentPage.value,
        start,
        end
      },
    };
    toPublish(
      'ql/control/getDeliveryCg',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getDeliveryCg } = obj.data;
        orderLists.value = [...orderLists.value, ...getDeliveryCg.list];
        lastPage.value = getDeliveryCg.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  /**
   * 时间筛选
   * @param sta  开始时间
   * @param en  结束时间
   */
  function change([sta, en]) {
    start = sta;
    end = en;
    currentPage.value = 1
    orderLists.value = []
    init()
  }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 20rpx auto;
    font-size: 32rpx;
  }

  .order {
    position: relative;

    .status {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 117rpx;
      height: 48rpx;
      background: #E3E3E3;
      border-radius: 0px 5px 0px 5px;
      text-align: center;
      line-height: 48rpx;
    }
  }

  .lit {
    font-size: 26rpx;
  }

  .package:nth-of-type(1) {
    margin-top: 0px;
  }
</style>
<style>
  .datas>>>.uni-date__x-input {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-date-x {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-icons {
    font-size: 48rpx !important;
  }
</style>